<template>
  <div class="roles">
    <el-breadcrumb separator-class="el-icon-right">
      <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button type="success" plain>添加角色</el-button>

    <el-table :data="roleList">
      <el-table-column type="expand">
        <template v-slot="{ row }">
          <el-row class="l1" v-for="l1 in row.children" :key="l1.id">
            <el-col :span="4">
              <el-tag @close="delRight(row, l1.id)" closable>{{ l1.authName }}</el-tag>
            </el-col>
            <el-col :span="20">
              <el-row class="l2" v-for="l2 in l1.children" :key="l2.id">
                <el-col :span="4">
                  <el-tag @close="delRight(row, l2.id)" closable type="success">{{ l2.authName }}</el-tag>
                </el-col>
                <el-col :span="20">
                  <el-tag @close="delRight(row, l3.id)" class="l3" closable type="warning" v-for="l3 in l2.children" :key="l3.id">{{ l3.authName }}</el-tag>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column type="index"></el-table-column>
      <el-table-column label="角色名称"  prop="roleName"></el-table-column>
      <el-table-column label="描述"  prop="roleDesc"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button icon="el-icon-edit"  plain size="mini" circle type="primary"></el-button>
          <el-button  icon="el-icon-delete"  plain size="mini" circle type="danger"></el-button>
          <el-button @click="showAssignDialog(row)" icon="el-icon-edit"  plain size="mini" round type="success">分配权限</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分配的对话框 -->
    <el-dialog
      title="分配权限"
      :visible.sync="assignVisible"
      width="40%">

      <el-tree
        ref="tree"
        node-key="id"
        default-expand-all
        show-checkbox
        :data="data"
        :props="defaultProps"></el-tree>

      <span slot="footer" class="dialog-footer">
        <el-button @click="assignVisible = false">取 消</el-button>
        <el-button @click="assignRights" type="primary">分 配</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      assignVisible: false,
      roleList: [],
      data: [],
      defaultProps: {
        children: 'children',
        label: 'authName'
      },
      roleId: ''
    }
  },
  created () {
    this.getRoleList()
  },
  methods: {
    async getRoleList () {
      const { meta, data } = await this.$axios.get('roles')
      if (meta.status === 200) {
        this.roleList = data
        console.log(this.roleList)
      } else {
        this.$message.error(meta.msg)
      }
    },
    async delRight (row, rightId) {
      const { data, meta } = await this.$axios.delete(`roles/${row.id}/rights/${rightId}`)

      if (meta.status === 200) {
        this.$message.success(meta.msg)
        row.children = data
      } else {
        this.$message.error(meta.msg)
      }
    },
    async showAssignDialog (row) {
      this.roleId = row.id
      this.assignVisible = true
      const { meta, data } = await this.$axios.get(`rights/tree`)
      if (meta.status === 200) {
        this.data = data
        const ids = []
        row.children.forEach(l1 => {
          l1.children.forEach(l2 => {
            l2.children.forEach(l3 => {
              ids.push(l3.id)
            })
          })
        })
        this.$refs.tree.setCheckedKeys(ids)
      } else {
        this.$message.error(meta.msg)
      }
    },
    async assignRights () {
      const ids = this.$refs.tree.getCheckedKeys() 
      const halfs = this.$refs.tree.getHalfCheckedKeys() 
      const rids = [...ids, ...halfs].join(',')

      const { meta } = await this.$axios.post(`roles/${this.roleId}/rights`, { rids })
      if (meta.status === 200) {
        this.$message.success(meta.msg)
        this.assignVisible = false
        this.getRoleList()
      } else {
        this.$message.error(meta.msg)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.l1 {
  margin-bottom: 10px;
  border-bottom: 1px dashed #ccc;
}
.l2 {
  margin-bottom: 10px;
}
.l3 {
  margin-right: 5px;
  margin-bottom: 5px;
}
</style>
